<template>
  <ag-popup
    v-model="infoVisible"
    title="图层信息"
    @onCancel="onCancel"
    class="layertree-info-box"
  >
    <el-tabs v-model="tabActive" @tab-click="tabOnClick">
      <el-tab-pane label="基本信息" name="base">
        <div class="list-box vscroll">
          <ul class="bar-ul">
            <li v-for="item in layer" :key="item[1]">
              <div class="infotable">
                <tr>
                  <td class="td-title">{{ item[0] }}</td>
                  <td class="td-info">{{ item[1] }}</td>
                </tr>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
      <el-tab-pane label="元数据信息" name="metadata">
        <div class="metadata-box vscroll">
          <!-- <div class="thumbnail">
            <el-image
              style="width: 100px; height: 100px"
              :src="thumbnail"
              fit="cover"
              :preview-src-list="[thumbnail]"
            ></el-image>
          </div> -->
          <div class="metadata-info">
            <div class="item" v-for="item in metadataList" :key="item.key"  v-show="showMata(item.key)">
              <span class="metadata-title">{{ item.label }}</span>
              <span class="value">{{
                metadata ? metadata[item.key] : "--"
              }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </ag-popup>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
let axiosWraper = agcim.net.axiosWraper;
export default {
  components: {
    "ag-popup": AgPopup,
  },
  props: ["infoVisible", "infoData"],
  data() {
    return {
      layer: [],
      dictionaryDataOptions: [],
      tabActive: "base",
      // 元数据
      thumbnail:
        "",
      metadataList: [
        {
          label: "说明",
          key: "metadataIllustration",
        },
        {
          label: "数据编码",
          key: "metadataEncode",
        },
        {
          label: "数据类型",
          key: "layerTypeCn",
        },
        {
          label: "数据来源",
          key: "dataSource",
        },
        {
          label: "数据版本",
          key: "dataVersion",
        },
        {
          label: "坐标系",
          key: "coordinateSystem",
        },
        {
          label: "覆盖区域",
          key: "area",
        },
        {
          label: "投影类型",
          key: "projectionType",
        },
        {
          label: "投影参数",
          key: "metadataProjectionParam",
        },
        {
          label: "比例尺",
          key: "metadataPlottingScale",
        },
        {
          label: "高程基准",
          key: "metadataDemStandard",
        },
        {
          label: "发布时间",
          key: "pubDate",
        },
        {
          label: "更新周期",
          key: "updateCycle",
        },
      ],
      metadata: undefined,
    };
  },
  computed:{
    showMata(){
      var that=this;
    
      return (value)=>{
   
        if(that.metadata&&that.metadata[value] &&that.metadata[value]!=''  &&that.metadata[value]!=undefined  &&that.metadata[value]!=null){
            return true;
        }
        return false;
      }
    }
  },
  mounted() {
    this.getDictionaryData();
  },
  methods: {
    onShow(node) {
      this.infoVisible = true;
    },
    onCancel() {
      this.$emit("changeinfoVisible", false);
      this.metadata = undefined;
      this.tabActive = "base";
    },
    getInfoData() {
      this.layer = [];
      let option = this.dictionaryDataOptions.filter((ele) => {
        return this.infoData.layerType == ele.code;
      });
      this.layer.push(["图层类型", option[0].name]);
      this.layer.push(["图层名称", this.infoData.nameCn]);
      // this.layer.push(["图层id", this.infoData.id]);
      this.layer.push(["图层地址", this.infoData.url]);
      this.layer.push(["备注", this.infoData.remarks]);
    },
    // 获取字典数据图层
    async getDictionaryData() {
      await axiosWraper
        .getData(agcim.net.apiPath.dic_getAgDicByTypeCode + `/A010`)
        .then((res) => {
          if (res.success) {
            this.dictionaryDataOptions = (res.content || []).map((element) => {
              return { name: element.itemName, code: element.itemCode };
            });
          }
        });
    },
    tabOnClick(tab, event) {
      if (tab.name === "metadata" && !this.metadata) {
        this.getMetadata(this.infoData.id);
      }
    },
    async getMetadata(layerId) {
      debugger
      //const url = `http://172.18.80.51/agcim-viewer-mgr-rest/dir/findLayerByLayerId/${layerId}`;
      const url= `${agcim.net.apiPath.getMetadata}/${layerId}`;
      var data = await axiosWraper.getDataByGet(url);
      const { layerData } = data.content;
      const metadata = JSON.parse(layerData);
      this.metadata = metadata;
      this.thumbnail = metadata.metadataPicture;
      console.log(this.metadata);
    },
  },
  watch: {
    infoData(nv, ov) {
      this.getInfoData();
    },
  },
};
</script>
<style src="./css/layerInfo.less" lang="less"></style>
